<template>
  <div class="login">
    <div class="login-con">
      <el-card :bordered="false">
        <div slot="header" >
          <span class="el-icon-menu">星华智能管理系统</span>
        </div>
        <el-select
          v-model="form.bookValue"
          style="width: 360px;"
          placeholder="请选择">
          <el-option
            v-for="item in GET_COLLAPSE.routerList"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        <div style="margin-top: 15px;">
          <el-input
            v-model="form.userName"
            placeholder="请输入用户名">
            <template slot="prepend">用户名</template>
          </el-input>
        </div>
        <div style="margin-top: 15px;">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码" >
            <template slot="prepend">密码</template>
          </el-input>
        </div>
        <div style="margin-top: 15px; ">
          <el-button
            :loading="form.login"
            type="primary"
            style="width: 360px;"
            @click="doLogin">登录</el-button>
        </div>
        <el-alert
          :title="alert.title"
          :type="alert.type"
          :closable="false"/>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import {mapMutations, mapGetters} from 'vuex'
import {UPDATE_USER_DETAIL, CHANGE_MENU_STATE} from '@/store/mutation-types'
import {request} from '@/lib/http'
import { routerList } from '@/store/Modules/menuState.ts'
export default Vue.extend({
  data () {
    return {
      form: {
        userName: '',
        password: '',
        login: false,
        bookValue: 'default',
      },
      alert: {
        title: '请输入用户名及密码',
        type: 'warning',
      },
    }
  },
  computed: {
    ...mapGetters(['GET_COLLAPSE']),
  },
  methods: {
    ...mapMutations({
      updataLoginInfo: UPDATE_USER_DETAIL,
    }) as {
      updataLoginInfo(p: any): void
    },
    ...mapMutations({
      changeRouterUrl: CHANGE_MENU_STATE,
    }) as {
      changeRouterUrl(p: any): void
    },
    doLogin () {
      const account = this.form.userName
      const pwd = this.form.password
      if (!account) {
        this.alert.type = 'error'
        this.alert.title = '用户不能为空'
        return
      }
      if (!pwd) {
        this.alert.type = 'error'
        this.alert.title = '密码不能为空'
        return
      }
      this.alert.type = 'warning'
      this.alert.title = '正在登录请稍后……'
      this.form.login = true
      let roterlist = this.GET_COLLAPSE.routerList
      roterlist.forEach((element:routerList, index:number) => {
        roterlist[index].isChoose = false
        if (element.value === this.form.bookValue) {
          //切换不同数据库接口
          roterlist[index].isChoose = true
        }
      })
      this.changeRouterUrl({key: 'routerList', value: roterlist})
      this.loginRequest(account, pwd)
    },
    loginRequest (account:string, pwd:string) {
      request({
        url: 'SGService/Login',
        data: {
          account,
          pwd,
        },
      }).then((userInfo:any) => {
        if (userInfo.flag === 1) {
          localStorage.setItem('token', userInfo.userInfo.token)
          this.updataLoginInfo(userInfo.userInfo)
          this.$router.push({
            name: 'Home',
          })
        } else if (userInfo.flag === 2) {
          this.$notify({
            title: '警告',
            message: '密码错误',
            type: 'warning',
          })
        } else if (userInfo.flag === 3) {
          this.$notify({
            title: '警告',
            message: '账号不存在',
            type: 'warning',
          })
        }
        this.alert.type = 'warning'
        this.alert.title = '请输入用户名及密码'
        this.form.login = false
      })
    },
  },
})
</script>
<style scoped lang='scss'>
@import "../../styles/base.scss";
.login {
    width: 100%;
    height: 100%;
    background-image: url('../../assets/login/login.jpg');
    background-size: cover;
    background-position: center;
    background-size: 100% 100%;
    position: absolute;
    &-con{
        position: absolute;
        right: 120px;
        top: 50%;
        transform: translateY(-60%);
        width: 400px;
        &-header{
            font-size: 16px;
            font-weight: 300;
            text-align: center;
            padding: 30px 0;
        }
        .form-con{
            padding: 10px 0 0;
        }
        .login-tip{
            font-size: 10px;
            text-align: center;
            color: #c3c3c3;
        }
    }
}
</style>
